import {useEffect, useRef, useState} from 'react';
import ProTable, {ProColumnType} from "@ant-design/pro-table";
import {
  ProForm,
  ProFormDependency,
  ProFormDigit,
  ProFormGroup,
  ProFormInstance,
  ProFormList,
  ProFormRadio,
  ProFormSelect,
  ProFormSwitch,
  ProFormText
} from "@ant-design/pro-form";
import {useDebounceFn, useMount, useRequest, useSetState} from "ahooks";
import {Button,} from 'antd';
import ProCard from '@ant-design/pro-card';
import {
  editTable,
  findByListDataDocumentSource,
  findByListDataSource,
  findByListObjectDataDocumentSource
} from "@/services/ant-design-pro/swagger";
import {defaultPagination, paginationTool} from '@/utils/util';
import {findBySelectList, findBySelectValueList} from "@/services/ant-design-pro/attribute";
import {findByDevise} from "@/services/ant-design-pro/devise";


//const [ setSelectItems] = useState<API.SelectItem[]>();
const valueTypeArray = [
  'password',
  'money',
  'textarea',
  'option',
  'date',
  'dateWeek',
  'dateMonth',
  'dateQuarter',
  'dateYear',
  'dateRange',
  'dateTimeRange',
  'dateTime',
  'time',
  'timeRange',
  'text',
  'select',
  'checkbox',
  'rate',
  'radio',
  'radioButton',
  'index',
  'indexBorder',
  'progress',
  'percent',
  'digit',
  'second',
  'avatar',
  'code',
  'switch',
  'fromNow',
  'image',
  'jsonCode',
];
const valem = {
  london: {
    text: '伦敦',
  },
  'New York': {
    text: '纽约',
  },
};
type DataType = {
  age: number;
  address: string;
  name: string;
  time: number;
  key: number;
  description: string;
};

const columns: ProColumnType<DataType>[] = [
  {

    title: 'Address',
    dataIndex: 'address',
    valueType: 'select',
    filters: false,
    onFilter: false
  }
];

const genData = (total: number) => {
  if (total < 1) {
    return [];
  }
  const data: DataType[] = [];
  for (let i = 1; i <= total; i += 1) {
    data.push ( {
      key: i,
      name: 'John Brown',
      age: i + 10,
      time: Date.now (),
      address: i % 2 === 0 ? 'london' : 'New York',
      description: `My name is John Brown, I am ${i}2 years old, living in New York No. ${i} Lake Park.`,
    } );
  }
  return data;
};

const initData = {
  bordered: true,
  loading: false,
  columns,
  pagination: {
    show: true,
    pageSize: 0,
    current: 0,
    total: 0,
  },
  size: 'small',
  expandable: false,
  headerTitle: '高级表格',
  tooltip: '高级表格 tooltip',
  showHeader: true,
  footer: true,
  rowSelection: {},
  scroll: false,
  hasData: true,
  tableLayout: undefined,
  toolBarRender: true,
  search: {
    show: true,
    span: 12,
    collapseRender: true,
    labelWidth: 80,
    filterType: 'query',
    layout: 'horizontal',
  },
  options: {
    show: true,
    density: true,
    fullScreen: true,
    setting: true,
  },
  apiServe: "",
  apiUrl: "",
  apiMethod: "GET"
};

const DynamicSettings = () => {
  const ref = useRef<ProFormInstance> ();
  const [selectItems, setSelectItems] = useState<API.SelectItem[]> ();
  const [apiUrl, setApiUrl] = useState<any> ( "" );
  const [valueEnum, setValueEnum] = useState<any> ();
  // const [docsList, setDocsList] = useState<Array<any>>();
  const [apiDocsList, setApiDocsList] = useState<API.SelectItem[]> ();

  const [swaggerDoc, setSwaggerDoc] = useSetState<API.SwaggerDoc> ( {
    info: undefined,
    openapi: "",
    paths: undefined,
    servers: [],
    tags: []
  } );
  const [pagination, setPagination] = useState<API.Pagination> ( defaultPagination () );

  const [config, setConfig] = useSetState<any> ( initData );
  const {
    run: fetchObjectDataDocumentSource,
    refresh,
    data: dataList,
    loading,
    runAsync
  } = useRequest ( findByListObjectDataDocumentSource, {
    debounceWait: 100,
    manual: true,
  } )

  const {
    run: fetchfindBySelectList,
    data: dataAttr,
    loading: loadingAttr,
  } = useRequest ( findBySelectList, {
    debounceWait: 100,
    manual: true,
  } )

  /** 去抖配置 */
  const updateConfig = useDebounceFn ( async (state) => {
    setConfig ( state );
  } );

  const tableColumns = (config.columns || columns)?.map ( (item: any) => ({
    ...item,
    ellipsis: config.ellipsis,
  }) );
  useEffect ( () => {

  }, [] )
  const fetchfindBySelectValueList = async (key: string) => {
    const data = await findBySelectValueList ( key )
    const mdata = data.data;
    console.log ( mdata )
    return mdata;
  }

  const fetchFindByDevise = async () => {
    try {
      const data = await findByDevise ( 1 )
      const mdata = data.data;
      const columns = mdata.columns;
      for (let i = 0; i < columns.length; i++) {
        let item = columns[i]
        if (item['valueType'] == "select") {
          const valem = await fetchfindBySelectValueList ( item['attribute'] )
          console.log ( valem )
          item['valueEnum'] = valem
          item['filters'] = true
          item['onFilter'] = true
          columns[i] = item;
        }
      }
      console.log ( columns )
      mdata.columns = columns;

      initData = mdata;
      setConfig ( mdata )
      fetchObjectDataDocumentSource ( mdata.apiUrl, {...pagination} )
    } catch (error) {
      console.log ( error )
    }
  }
  useMount ( () => {
    fetchFindByListDataSource ();
    fetchfindBySelectList ()
    fetchFindByDevise ()
  } );
  const fetchFindByListDataSource = async () => {
    try {
      const msg = await findByListDataSource ();
      console.log ( msg )
      // @ts-ignore
      setSelectItems ( msg )
      return msg;
    } catch (error) {
      console.log ( error )
    }
    return undefined;
  };
  const fetchFindByListDataDocSource = async (url: string) => {
    try {
      const msg = await findByListDataDocumentSource ( url );
      setSwaggerDoc ( msg )
      console.log ( msg )
      let docsList: Array<any> = [];
      // @ts-ignore
      let paths = msg.paths;
      for (const pathsKey in paths) {
        console.log ( pathsKey )
        docsList.push ( {
          label: pathsKey,
          value: pathsKey
        } )

      }
      setApiDocsList ( docsList )
      console.log ( docsList )

      return msg;
    } catch (error) {
      console.log ( error )
    }
    return undefined;
  };

  const serverSelectChange = function (value: any) {
    console.log ( "serverSelectChange", value )
    fetchFindByListDataDocSource ( value )
    //   fetchFindByListDataDocSource(value, {...pagination})
  }
  const serverApiUrlSelectChange = function (value: any) {
    //   console.log("serverApiUrlSelectChange",swaggerDoc, value)
    setApiUrl ( value )
    fetchObjectDataDocumentSource ( value, {...pagination} )
    runAsync ( value, {...pagination} ).then ( (data1) => {
      console.log ( data1 );
      var data = data1.data;
      initData.pagination = {
        show: true,
        pageSize: data.size,
        current: data.current,
        total: data.total,
      };
      initData.apiMethod = "GET"
      updateConfig.run ( initData )
      var list = data.list;
      if (list.length && data.current > 0) {
        var vem = list[0];
        console.log ( vem )
        var vemlist = {}
        for (const vemKey in vem) {
          vemlist[vemKey] = vemKey
        }
        setValueEnum ( vemlist )
        console.log ( vemlist )
      }
    } ).catch ( (error) => {
      console.log ( error );
    } )
    // console.log(dataList)

  }
  const tableOnLoad = function (datasorce: any) {
    console.log ( "tableOnLoad", datasorce )
  }


  // @ts-ignore
  return (
    <ProCard
      split="vertical"
      bordered
      headerBordered
      style={{
        height: '100vh',
        overflow: 'hidden',
      }}
    >

      <ProCard
        style={{
          height: '100vh',
          overflow: 'auto',
        }}
      >
        <Button type={"primary"} onClick={() => editTable ( config )}>提交</Button>
        <ProTable
          {...config}
          formRef={ref}
          onDataSourceChange={(d) => {
            console.log ( "onDataSourceChange", d )
          }}
          onLoad={(d) => {    // 数据加载完操作
            console.log ( "onDataSourceChange", d )
          }}
          dataSource={dataList?.data?.list}
          loading={loading}
          pagination={paginationTool ( pagination, dataList?.data?.total, (data1: API.Pagination) => {
            setPagination ( data1 )
            if (apiUrl != "") {
              fetchObjectDataDocumentSource ( apiUrl, {...pagination} )
            }
          } )}
          search={config.search?.show ? config.search : {}}
          expandable={
            config.expandable && {
              expandedRowRender: (record: DataType) => <p>{record.description}</p>,
            }
          }
          options={config.options?.show ? config.options : false}
          toolBarRender={
            config?.toolBarRender
              ? () => [
                <Button key="refresh" type="primary" onClick={() => {
                  refresh ()
                }}>
                  刷新:{dataList?.data?.total}
                </Button>,
              ]
              : false
          }
          footer={config.footer ? () => 'Here is footer' : false}
          headerTitle={config.headerTitle}
          columns={tableColumns}

          scroll={config.scroll}

        />
      </ProCard>
      <ProForm<API.DeviseInfo>
        layout="inline"
        initialValues={
          config
        }

        onFinish={async (values) => {

          console.log ( values );
          //  message.success('提交成功');
        }}
        onValuesChange={(_, values) => {
          updateConfig.run ( values )
          console.log ( values )
        }
        }
      >
        <ProCard
          colSpan="470px"
          style={
            {
              height: '100vh',
              overflow
            :
            'auto',
            boxShadow
            :
            '2px 0 6px rgba(0, 21, 41, 0.35)',
            top
            :
            0,
            right
            :
            0,
            width
            :
            470,
          }
          }
          tabs={
            {}
          }
        >
          <
            ProCard.TabPane
            key="tab1"
            tab="基本配置"
            cardProps={
              {
                bodyStyle: {
                  padding: 12,
                }
                ,
              }
            }
          >
            <
              ProForm.Group
              title="表格配置"
              size={0}
              collapsible
              direction="horizontal"
              labelLayout="twoLine"
            >
              < ProFormSwitch
                fieldProps={
                  {
                    size: 'small',
                  }
                }
                label="边框"
                tooltip="bordered"
                name="bordered"
                / >
              < ProFormRadio.Group
                tooltip = {`size="middle"`
              }
                radioType = "button"
                fieldProps = {
                {
                  size: 'small',
                }
              }
                label = "尺寸"
                options = {
                [
                  {
                    label: '大',
                    value: 'default',
                  },
                  {
                    label: '中',
                    value
                :
                'middle',
              }
                ,
              {
                label: '小',
                value
                :
                'small',
              }
                ,
                ]
              }
                name = "size"
                / >
              < ProFormSwitch
                fieldProps={
                  {
                    size: 'small',
                  }
                }
                label="加载中"
                tooltip="loading"
                name="loading"
                /
              >
              < ProFormSwitch
                fieldProps = {
                {
                  size: 'small',
                }
              }
                label = "显示标题"
                tooltip = "showHeader"
                name = "showHeader"
                / >
              < ProFormSwitch
                fieldProps={
                  {
                    size: 'small',
                  }
                }
                label="页脚"
                tooltip="footer"
                name="footer"
                /
              >
              < ProFormSwitch
                fieldProps = {
                {
                  size: 'small',
                }
              }
                label = "支持展开"
                tooltip = "expandable"
                name = "expandable"
                / >
              < ProFormSwitch
                fieldProps={
                  {
                    size: 'small',
                  }
                }
                label="行选择"
                tooltip="rowSelection"
                name="rowSelection"
                /
              >
            < /ProForm.Group>
            <ProForm.Group
              size={0}
              collapsible
              direction="horizontal"
              labelLayout="twoLine"
              tooltip="toolBarRender={false}"
              title="工具栏"
              extra={
                <ProFormSwitch
                  fieldProps={{
                    size: 'small',
                  }}
                  noStyle
                  name="toolBarRender"
                />
              }
            >
              <ProFormText
                fieldProps={{
                  size: 'small',
                }}
                label="表格标题"
                name="headerTitle"
                tooltip="headerTitle={false}"
              />
              <ProFormText
                fieldProps={{
                  size: 'small',
                }}
                label="表格的tooltip"
                name="tooltip"
                tooltip="tooltip={false}"
              />

              <ProFormSwitch
                fieldProps={{
                  size: 'small',
                }}
                label="Icon 显示"
                name={['options', 'show']}
                tooltip="options={false}"
              />
              <ProFormSwitch
                fieldProps={{
                  size: 'small',
                }}
                label="密度 Icon"
                name={['options', 'density']}
                tooltip="options={{ density:false }}"
              />
              <ProFormSwitch
                fieldProps={{
                  size: 'small',
                }}
                label="keyWords"
                name={['options', 'search']}
                tooltip="options={{ search:'keyWords' }}"
              />
              <ProFormSwitch
                label="全屏 Icon"
                fieldProps={{
                  size: 'small',
                }}
                name={['options', 'fullScreen']}
                tooltip="options={{ fullScreen:false }}"
              />
              <ProFormSwitch
                label="列设置 Icon"
                fieldProps={{
                  size: 'small',
                }}
                tooltip="options={{ setting:false }}"
                name={['options', 'setting']}
              />
            </ProForm.Group>
          </ProCard.TabPane>
          <ProCard.TabPane
            cardProps={
              {
                bodyStyle: {
                  padding: 12,
                }
                ,
              }
            }
            key="tab3"
            tab="表单配置"
          >
            < ProForm.Group
              title="查询表单"
              size={0}
              collapsible
              tooltip="search={false}"
              direction="horizontal"
              labelLayout="twoLine"
              extra={
                <ProFormSwitch
                  fieldProps={{
                    size: 'small',
                  }}
                  noStyle
                  name={['search', 'show']}
                />
              }
            >
              <
                ProFormText
                label="提交按钮文案"
                fieldProps={
                  {
                    size: 'small',
                  }
                }
                tooltip={`search={{submitText:"提交"}}`
                }
                name={['search', 'submitText'
                ]
                }
              />
              <ProFormText
                label="重置按钮文案"
                fieldProps={{
                  size: 'small',
                }}
                tooltip={`search={{resetText:"重置"}}`}
                name={['search', 'resetText']}
              />
              <ProFormSwitch
                fieldProps={{
                  size: 'small',
                }}
                label="收起按钮"
                tooltip={`search={{collapseRender:false}}`}
                name={['search', 'collapseRender']}
              />
              <ProFormSwitch
                fieldProps={{
                  size: 'small',
                }}
                label="表单收起"
                name={['search', 'collapsed']}
                tooltip={`search={{collapsed:false}}`}
              />
              <ProFormSelect
                fieldProps={{
                  size: 'small',
                }}
                tooltip={`search={{span:8}}`}
                options={[
                  {
                    label: '24',
                    value: 24,
                  },
                  {
                    label: '12',
                    value: 12,
                  },
                  {
                    label: '8',
                    value: 8,
                  },
                  {
                    label: '6',
                    value: 6,
                  },
                ]}
                label="表单栅格"
                name={['search', 'span']}
              />
              <ProFormRadio.Group
                radioType="button"
                fieldProps={{
                  size: 'small',
                }}
                name={['search', 'layout']}
                tooltip={`search={{layout:"${config.search?.layout}"}}`}
                options={[
                  {
                    label: '垂直',
                    value: 'vertical',
                  },
                  {
                    label: '水平',
                    value: 'horizontal',
                  },
                ]}
                label="表单布局"
              />
              <ProFormRadio.Group
                radioType="button"
                fieldProps={{
                  size: 'small',
                }}
                name={['search', 'filterType']}
                tooltip={`search={{filterType:"light"}}`}
                options={[
                  {
                    label: '默认',
                    value: 'query',
                  },
                  {
                    label: '轻量',
                    value: 'light',
                  },
                ]}
                label="表单类型"
              />
            </ProForm.Group>
          </ProCard.TabPane>
          <ProCard.TabPane
            cardProps={
              {
                bodyStyle: {
                  padding: 12,
                }
                ,
              }
            }
            key="tab2"
            tab="数据配置"
          >
            < ProForm.Group
              title="接口链接"
              size={0}
              collapsible
              tooltip="pagination={}"
              direction="horizontal"
              labelLayout="twoLine"
            >
              < ProFormSelect
                name="apiServe"
                label="服务地址"
                style={
                  {
                    marginBottom: 8,
                    width
                  :
                  300
                }
                }
                onChange={serverSelectChange}

                request={async () => {
                  if (selectItems) {
                    console.log ( selectItems )
                    return selectItems
                  }
                  return [];
                }
                }
              />
              <ProFormSelect
                name="apiUrl"
                label="接口地址"
                style={{
                  marginBottom: 8,
                  width: 300
                }}
                onChange={serverApiUrlSelectChange}
                options={apiDocsList}
              />
            </ProForm.Group>
            <ProForm.Group
              title="分页器"
              size={
                0
              }
              collapsible
              tooltip="pagination={}"
              direction="horizontal"
              labelLayout="twoLine"
              extra={
                <ProFormSwitch
                  fieldProps={{
                    size: 'small',
                  }}
                  noStyle
                  name={['pagination', 'show']}
                />
              }
            >
              <
                ProFormRadio.Group
                tooltip={`pagination={size:"middle"}`
                }
                radioType="button"
                fieldProps={
                  {
                    size: 'small',
                  }
                }
                label="尺寸"
                options={
                  [
                    {
                      label: '默认',
                      value: 'default',
                    },
                    {
                      label: '小',
                      value
                  :
                  'small',
                }
                  ,
                  ]
                }
                name={['pagination', 'size'
                ]
                }
              />
              <ProFormDigit
                fieldProps={{
                  size: 'small',
                }}
                label="页码"
                tooltip={`pagination={{ current:0 }}`}
                name={['pagination', 'current']}
              />
              <ProFormDigit
                fieldProps={{
                  size: 'small',
                }}
                label="每页数量"
                tooltip={`pagination={{ pageSize:0 }}`}
                name={['pagination', 'pageSize']}
              />
              <ProFormDigit
                fieldProps={{
                  size: 'small',
                }}
                label="数据总数"
                tooltip={`pagination={{ total:10 }}`}
                name={['pagination', 'total']}
              />
            </ProForm.Group>
          </ProCard.TabPane>
          <ProCard.TabPane
            cardProps={
              {
                bodyStyle: {
                  padding: 12,
                }
                ,
              }
            }
            key="tab4"
            tab="列配置"
          >
            < ProFormList
              name="columns"
              initialValue={config.columns}
              itemRender={({listDom, action}) => {
                return (
                  <ProCard
                    bordered
                    style={{
                      marginBottom: 8,
                      position: 'relative',
                    }}
                    bodyStyle={{
                      padding: 8,
                      paddingRight: 16,
                      paddingTop: 16,
                    }}
                  >
                    <div
                      style={{
                        position: 'absolute',
                        top: -4,
                        right: 2,
                      }}
                    >
                      {action}
                    </div>
                    {listDom}
                  </ProCard>
                );
              }
              }
            >
              <
                ProFormText
                rules={
                  [
                    {
                      required: true,
                    },
                  ]
                }
                name="title"
                label="标题"/>
              < ProFormGroup
                style={
                  {
                    marginTop: 8,
                  }
                }
              >
                <
                  ProFormSwitch
                  label="过长省略"
                  name="ellipsis"/>
                < ProFormSwitch
                  label="复制按钮"
                  name="copyable"/>
                < ProFormSwitch
                  label="索索"

                  name="filters"

                />
              < /ProFormGroup>
              <ProFormGroup
                style={{
                  marginTop: 8,
                }}
                size={8}
              >
                <ProFormSelect
                  label="dataIndex"
                  width="xs"
                  name="dataIndex"
                  valueEnum={valueEnum}
                />
                <ProFormSelect
                  width="xs"
                  label="值类型"
                  name="valueType"
                  fieldProps={{
                    onChange: () => {
                      ref.current?.resetFields ();
                    },
                  }}
                  options={valueTypeArray.map ( (value) => ({
                    label: value,
                    value,
                  }) )}
                />
              </ProFormGroup>
              <ProFormGroup
                style={{
                  marginTop: 8,
                }}
                size={8}
              >
                <ProFormText width="xs" label="列提示" name="tooltip"/>
              </ProFormGroup>
              <ProFormDependency name={['valueType', 'valueEnum']}>
                {({valueType, valueEnum}) => {
                  if (valueType !== 'select') {
                    return null;
                  } else {

                  }
                  return (
                    <ProFormSelect
                      formItemProps={{
                        style: {
                          marginTop: 8,
                        }
                      }}

                      onChange={() => {

                      }}

                      options={dataAttr?.data}
                      label="数据枚举"
                      name="attribute"
                    />
                  );
                }}
              </ProFormDependency>
            </ProFormList>
          </ProCard.TabPane>

        </ProCard>

      </ProForm>

    </ProCard>
  );
};

export default DynamicSettings;
